<script lang="ts" setup>
import sun from "@/assets/sun.svg"
import moon from "@/assets/moon.svg"
import { setting } from "../index/editorConfig/setting"

function changeTheme() {
  const html = document.querySelector("html") as HTMLHtmlElement
  if (setting.theme == "dark") {
    html.className = "light"
    setting.theme = "light"
  } else {
    html.className = "dark"
    setting.theme = "dark"
  }
}
</script>

<template>
  <div class="changeTheme" @click="changeTheme">
    <img :src="setting.theme == 'dark' ? sun : moon" alt="" class="icon" />
  </div>
</template>

<style lang="scss" scoped>
.changeTheme {
  position: absolute;
  top: 50%;
  right: 100px;
  transform: translateY(-50%);
  user-select: none;
  .icon {
    width: 25px;
    height: 25px;
    transition: all 0.4s var(--n-bezier);
    cursor: url(),
      auto !important;
  }
}
</style>
